<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
	<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/element/element.css">
<style type="text/css">
	table label{
		font-weight: bold;
		/*padding-right: 20px;*/
	}
	/*table span{
		margin-right:50px;
	}*/
	.table > tbody > tr > td{
		vertical-align: middle;
	}
	.m-ipt{
		-webkit-appearance: none;
	    background-color: #fff;
	    background-image: none;
	    border-radius: 4px;
	    border: 1px solid #dcdfe6;
	    box-sizing: border-box;
	    color: #606266;
	    display: inline-block;
	    font-size: inherit;
	    height: 32px;
	    line-height: 32px;
	    outline: none;
	    padding: 0 10px;
	    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
	    width: 100%;
	}
	.m-ipt:focus {
	    outline: none;
	    border-color: #409eff;
	}
	.cancel{
		color: red;
	}
	.orange{
		color: orange;
	}
	.red{
		color: red;
	}
	.recv{
		padding: 2px;
		color: #4e6ef2;
		border: 1px solid #4e6ef2;
		border-radius: 3px;
	}
	.delived{
		padding: 2px;
		color: #1d9a71;
		border: 1px solid #1d9a71;
		border-radius: 3px;
	}
	.cur-row{
		background: #f5f5f5;
		font-weight: bold;
	}
	.back{
		padding: 2px;
		color: red;
		border: 1px solid red;
		border-radius: 3px;
	}
	.barter{
		padding: 2px;
		color: orange;
		border: 1px solid orange;
		border-radius: 3px;
	}
	.sub-table td{
		padding: 5px;
	}
	ul.item{
		float: left;
		min-width: 200px;
		/* height: 78px; */
		height: 108px;
		padding: 0px;
		padding-bottom: 5px;
		margin-right: 20px;
		border-bottom: 2px solid transparent;
		cursor: pointer;
	}
	ul.item:hover{
		border-bottom-color: #00a0f0;
	}
	.item .pic-box{
		display: inline-block;
		/* width: 60px;
		height: 60px; */
		width: 90px;
		height: 90px;
		overflow: hidden;
	}
	.item .info{
		display: inline-block;
		/*width: 50px;*/
		/*height: 50px;*/
	}
	.pic-box img{
		height: 100%;
	}
	.item .info{
		padding-left: 5px;
		color: #9195a3;
		font-size: 12px;
	}
	ul.tab{
		position: relative;
		list-style: none;
		/*background: #aaa;*/
		/*text-align: center;*/
	}
	ul.tab li{
		display: inline-block;
		margin-right: 10px;
		border-bottom: 2px solid transparent;
		font-size: 14px;
		cursor: pointer;
	}
	ul.tab li:hover{
		color: #00aaff;
	}
	ul.tab .tab-atv{
		color: #00aaff;
		border-bottom-color: #00aaff;
	}
</style>
</head>

<body>
	<!-- MAIN -->
	<div class="main" id="app">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>订单管理</li>
			    <li>订单列表</li>
			</ul>
			<div class="container-fluid">
				<form class="form-inline">
					提交日期：<input type="text" class="form-control" size="6" name="date1" onclick="WdatePicker()">
						- <input type="text" class="form-control" size="6" name="date2" onclick="WdatePicker()">
					<vue-select 
						placeholder="销售"
						v-model="search.acct_name"
						url="{%:url('Account/getSalers')%}"
						style="display: inline-block;width: 100px;">
					</vue-select>
					<input type="text" class="form-control" v-model="search.cust" placeholder="客户" size="8">
					<input type="text" class="form-control" v-model="search.phone" placeholder="电话" size="8">
					<input type="text" class="form-control" v-model="search.order_no" placeholder="订单号" size="8">
					<select class="form-control" v-model="search.goods_categories_type">
						<option value=""> - 选择分类 - </option>
						<option v-for="item in base.types" :value="item.val"> {{ item.name }} </option>
					</select>
					<vue-select 
						placeholder="类别"
						v-model="search.cate_name"
						url="{%:url('Goods/getCateListBySort')%}"
						:sorts ="['衣服','下装','鞋','箱包','饰品','化妆品','珠宝','百货']"
						style="display: inline-block;width: 100px;">
					</vue-select>
					<vue-select 
						placeholder="品牌"
						v-model="search.brand_name"
						url="{%:url('Brand/getListBySort')%}"
						:sorts ="['AB','CD','EF','GH','IJ','KL','MN','OP','QR','ST','UV','WX','YZ']"
						style="display: inline-block;width: 100px;">
					</vue-select>
					<select class="form-control" v-model="search.progress">
						<option value=""> -状态- </option>
						<option value="1"> 新订单 </option>
						<option value="2"> 已报单 </option>
						<option value="3"> 已到货 </option>
						<option value="4"> 已发货 </option>
						<option value="5"> 退货 </option>
						<option value="6"> 换货 </option>
						<option value="0"> 已取消 </option>
					</select>
				    <button type="button" class="btn btn-primary" @click="getList()">查询</button>
					<div style="float: right;margin-right: 20px;font-size: 16px;">
						<span   style="margin-right: 5px;">
							总和:
							<span style="color: red;">{{allData.all_price}}</span>
						</span>
						<span  style="margin-right: 5px;">
							总数量:
							<span  style="color: red;">{{allData.all_qty}}</span>
					</div>
					<!-- 总和<input type="text" class="form-control" v-model="allData.all_price"  size="8">
					总数量<input type="text" class="form-control" v-model="allData.all_qty"  size="8"> -->
				</form>
				<!-- 数据开始-->
				<table class="table table-hover">
					<thead>
						<tr>
							<th>订单编号</th>
							<th>快递单号</th>
							<th>客户</th>
							<th>地区</th>
							<!-- <th>详细地址</th> -->
							<th>支付方式</th>
							<th>销售</th>
							<th>商品</th>
							<!-- <th>颜色</th>
							<th>尺码</th>
							<th>备注</th> -->
							<th>提交日期</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					<template v-for="row in rows">
						<tr :class="{'cur-row': row.show || cur_item.order_id == row.id}">
				        	<td>
				        		<a href="javascript:;" @click="row.show = !row.show" >
									<i class="fa" :class="row.show ? 'fa-angle-down' : 'fa-angle-right'" style="display: inline-block;width: 8px;"></i>
									{{ row.order_no }}
								</a>
				        	</td>
							<td>{{ row.express_no }}</td>
				        	<td>{{ row.cust }}<div style="color: #aaa">{{ row.phone }}</div></td>
				        	<td>{{ row.area_path }}</td>
							<!-- <td>{{ row.detail_addr }}</td> -->
				        	<td>{{ row.pay_type }}</td>
				        	<td>{{ row.acct_name }}</td>
				        	<td style="width: 45%;">
				        		<ul v-for="item in row.items" class="item" @click="detail(item)" :title="item.remarks">
				        			<li class="pic-box">
					        			<img :src="item.pic_tmb">
				        			</li>
				        			<li class="info">
				        				<div>{{ item.goods_name }}</div>
				        				<div>
				        					￥{{ item.price }}
				        					<span style="font-size: 8px;padding-left: 5px;">x</span>{{ item.qty }}
				        				</div>
										<div>
				        					合计：￥{{ item.price*item.qty + Number(item.pack_price)}} 
										<div style="color: #FF88C2;">
											颜色:{{item.color}}
				        				</div>
										<div style="color: #FF88C2;">
											尺寸:{{item.spec}}
				        				</div>
				        				<div style="color: #FF88C2;">
				        					备注:{{ item.remarks.length>10 ? item.remarks.substr(0,10) + '..' : item.remarks }}
				        				</div>
				        				<span :class="progress_class[item.progress]">{{ item.progress_txt }}</span>
				        				<span style="margin-left: 8px;">
				        					<input type="checkbox" @click.stop="" :value="item.id" v-model="row.checkedId" v-if="item.can_ship">
				        				</span>
				        			</li>
				        		</ul>
								<ul class="item">
									<li class="info" style="padding-top: 50px;">
										总金额：{{totalPrice(row.items)}}
									</li>

								</ul>
				        	</td>
							<!-- <td>
								<div v-for="item in row.items" :key="'color'+item.id">{{item.goods_name }}:<span style="color: #FF88C2;">{{item.color}}</span></div>
							</td>
							<td>
								<div v-for="item in row.items" :key="'spec'+item.id">{{item.goods_name }}:<span style="color: #FF88C2;">{{item.spec}}</span></div>
							</td>
							<td>
								<div v-for="item in row.items" :key="'remarks'+item.id" >
									<span v-if="item.remarks">{{item.goods_name }}:<span style="color: #FF88C2;">{{item.remarks}}</span></span>
								</div>
							</td> -->
				        	<td>{{ row.add_day }} <span style="color: #aaa">{{ row.add_time }}</span></td>
				        	<td>
				        		<button class="btn btn-primary btn-sm" v-if="row.can_ship" @click="ship(row)">发货</button>
								<button class="btn btn-primary btn-sm" v-if="row.can_ship" @click="editAddr(row)">修改信息</button>
				        	</td>
						</tr>
						<tr v-show="row.show" :style="row.over_time?'background: #FFFF99':'background: #ecf5ff;'">
							<td colspan="2">接单日期：{{ row.recv_day }}</td>
							<!-- <td colspan="5">详细地址：{{ row.detail_addr }}</td> -->
							<td colspan="10">
								详细地址：{{ row.detail_addr }}
								<span style="margin-left: 10px;cursor:pointer;" class="clickboard"   @click="copyFn(row)">一键复制</span>
							</td>
						</tr>
					</template>
					</tbody>
				</table>
				<vue-page :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-page>
			</div>
		</div>
		<vue-modal :visible.sync="showModal" title="查看" width="800px" height="60%">
			<ul class="tab">
				<li  @click="pos=1" :class="{'tab-atv': pos == 1}">下单信息</li>
				<li  @click="pos=2;getReltList()" :class="{'tab-atv': pos == 2}">查看关联记录</li>
			</ul>
			<div class="form-horizontal" style="width: 90%;padding-bottom: 100px;" v-show="pos == 1">
				<div class="form-group">
				    <label class="col-md-3 control-label">商品名称 | 颜色：</label>
				    <div class="col-md-4 form-control-static">{{ cur_item.goods_name }} | {{ cur_item.color }}</div> 
				    <div class="col-sm-1">
				    	<a :href="cur_item.pic" target="_BLANK">
							<img :src="cur_item.pic" style="position: absolute;width: 300px;">
						</a>
					</div>
				</div>
				<div class="form-group">
				    <label class="col-md-3 control-label">尺码：</label>
				    <div class="col-md-4">
				    	<select class="form-control" v-model="cur_item.spec" :disabled="edit_status != 1">
							<option v-for="size in cur_item.size_set" :value="size"> {{ size }} </option>
						</select>
				    </div>  
				</div>
				<div class="form-group">
				    <label class="col-md-3 control-label">单价￥：</label>
				    <div class="col-md-4">
				    	<input type="text" class="form-control" v-model="cur_item.price" :disabled="edit_status != 1">
				    </div>  
				</div>
				<div class="form-group">
				    <label class="col-md-3 control-label">数量：</label>
				    <div class="col-md-4">
				    	<input type="text" class="form-control" v-model="cur_item.qty" :disabled="edit_status != 1">
				    </div>  
				</div>
				<div class="form-group">
				    <label class="col-md-3 control-label">运费/包装：</label>
				    <div class="col-md-4">
				    	<input type="text" class="form-control" v-model="cur_item.pack_price" :disabled="edit_status != 1">
				    </div>  
				</div>
				<div class="form-group">
				    <label class="col-md-3 control-label">备注：</label>
				    <div class="col-md-4">
				    	<textarea class="form-control" rows="2" style="resize: none;" v-model="cur_item.remarks" :disabled="edit_status != 1"></textarea>
				    </div>  
				</div>
				<div class="form-group">
					<div class="col-md-3 control-label"></div>
					<div class="col-md-4 form-control-static">
						<span v-if="cur_item.progress > 0 && cur_item.progress < 4">
							<button type="button " class="btn btn-sm btn-primary"
								 @click="edit_status = 1"
								 v-show="edit_status == 0">修改
							</button>
							<span v-show="edit_status == 1">
								<button type="button" class="btn btn-sm btn-success" @click="saveItem()" >提交</button>
								<button type="button" class="btn btn-sm btn-info" @click="edit_status = 0">不改了</button>
							</span>
							<button type="button" class="btn btn-sm btn-danger" 
								@click="cancel_info.id = cur_item.id;edit_status = 2"
								v-show="edit_status == 0">取消订单
							</button>
						</span>
						<span v-if="cur_item.progress==4||cur_item.progress==6">
							<button type="button " class="btn btn-sm btn-primary"
							@click="edit_status = 1"
							v-show="edit_status == 0">修改
							</button>
							<span v-show="edit_status == 1">
								<button type="button" class="btn btn-sm btn-success" @click="saveItem()" >提交</button>
								<button type="button" class="btn btn-sm btn-info" @click="edit_status = 0">不改了</button>
							</span>
							<button type="button" class="btn btn-sm btn-danger"
								@click="reject_info.id = cur_item.id;reject_info.qty = cur_item.qty;edit_status = 3"
								v-show="edit_status == 0">退货
							</button>
							<button type="button" class="btn btn-sm btn-warning"
								@click="exchange_info.id = cur_item.id;exchange_info.qty = cur_item.qty;edit_status = 4"
								v-show="edit_status == 0">换货
							</button>
						</span>
						<!-- <span v-if="cur_item.progress==6">
							<button type="button " class="btn btn-sm btn-primary"
							@click="edit_status = 1"
							v-show="edit_status == 0">修改
							</button>
							<span v-show="edit_status == 1">
								<button type="button" class="btn btn-sm btn-success" @click="saveItem()" >提交</button>
								<button type="button" class="btn btn-sm btn-info" @click="edit_status = 0">不改了</button>
							</span>
							<button type="button" class="btn btn-sm btn-warning"
								@click="exchange_info.id = cur_item.id;exchange_info.qty = cur_item.qty;edit_status = 4"
								v-show="edit_status == 0&&userInfo.role_id!=7">换货
							</button>
						</span> -->
					</div>
				</div>
				<!-- 取消 -->
				<div class="form-group" v-show="edit_status == 2">
				    <label class="col-md-3 control-label">取消原因：</label>
				    <div class="col-md-4">
				    	<textarea class="form-control" rows="2" style="resize: none;" v-model="cancel_info.reason"></textarea>
				    </div>  
				</div>
				<div class="form-group" v-show="edit_status == 2">
					<label class="col-md-3 control-label"></label>
					<div class="col-md-4">
						<button type="button" class="btn btn-sm btn-danger" @click="cancelItem()">提交</button>
						<button type="button" class="btn btn-sm btn-info" @click="edit_status = 0">不取消</button>
					</div>
				</div>
				<!-- 退货 -->
				<div class="form-group" v-show="edit_status == 3">
				    <label class="col-md-3 control-label">退货原因：</label>
				    <div class="col-md-4">
				    	<textarea class="form-control" rows="2" style="resize: none;" v-model="reject_info.reason"></textarea>
				    </div>  
				</div>
				<div class="form-group" v-show="edit_status == 3">
				    <label class="col-md-3 control-label">退回数量：</label>
				    <div class="col-md-4">
				    	<input type="text" class="form-control" v-model="reject_info.qty">
				    </div>  
				</div>
				<div class="form-group" v-show="edit_status == 3">
					<label class="col-md-3 control-label"></label>
					<div class="col-md-4">
						<button type="button" class="btn btn-sm btn-danger" @click="rejectItem()">提交</button>
						<button type="button" class="btn btn-sm btn-info" @click="edit_status = 0">不退了</button>
					</div>
				</div>
				<!-- 换货 -->
				<div class="form-group" v-show="edit_status == 4">
				    <label class="col-md-3 control-label">换货原因：</label>
				    <div class="col-md-4">
				    	<textarea class="form-control" rows="2" style="resize: none;" v-model="exchange_info.reason"></textarea>
				    </div>
				</div>
				<div class="form-group" v-show="edit_status == 4">
				    <label class="col-md-3 control-label">换货数量：</label>
				    <div class="col-md-4">
				    	<input type="text" class="form-control" v-model="exchange_info.qty">
				    </div>  
				</div>
				<div class="form-group" v-show="edit_status == 4">
					<label class="col-md-3 control-label"></label>
					<div class="col-md-4">
						<button type="button" class="btn btn-sm btn-danger" @click="exchangeItem()">提交</button>
						<button type="button" class="btn btn-sm btn-info" @click="edit_status = 0">不换了</button>
					</div>
				</div>
			</div>
			<div v-show="pos == 2">
				<ul class="tab">
					<li  @click="pos2=1" :class="{'tab-atv': pos2 == 1}">报单</li>
					<li  @click="pos2=2" :class="{'tab-atv': pos2 == 2}">发货</li>
				</ul>
				<table class="table table-condensed" v-show="pos2 == 1">
					<thead>
						<tr>
							<th>序号</th>
							<th>档口</th>
							<th>工厂价</th>
							<th>数量</th>
							<th>运费</th>
							<th>报单备注</th>
							<th>报单员</th>
							<th>日期</th>
							<th>合计</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="row,i in cur_item_relation.pur_rows">
							<td>{{ i+1 }}</td>
							<td>{{ row.stall_info.name }}</td>
							<td>{{ row.price }}</td>
							<td>{{ cur_item.qty }}</td>
							<td>{{ row.factory_price }}</td>
							<td>{{ row.remarks }}</td>
							<td>{{ row.acct_name }}</td>
							<td>{{ row.add_time }}</td>
							<td>{{ cur_item.qty*row.price + Number(row.factory_price) }}</td>
							<!-- cur_item -->
							<td><button class="btn btn-primary btn-sm" @click="openBaodanDialog(row)">修改</button></td>
						</tr>
						<tr v-if="cur_item_relation.pur_rows.length == 0">
							<td style="color: red;">无记录</td>
						</tr>
					</tbody>
				</table>
				<table class="table table-condensed" v-show="pos2 == 2">
					<thead>
						<tr>
							<th>序号</th>
							<th>物流公司</th>
							<th>物流单号</th>
							<th>发货数量</th>
							<th>运费及包装</th>
							<th>发货员</th>
							<th>日期</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="row,i in cur_item_relation.exp_rows">
							<td>{{ i+1 }}</td>
							<td>{{ row.express_info.name }}</td>
							<td>{{ row.express_info.express_no }}</td>
							<td>{{ row.qty }}</td>
							<td>{{ row.express_info.cost }}</td>
							<td>{{ row.acct_name }}</td>
							<td>{{ row.add_time }}</td>
						</tr>
						<tr v-if="cur_item_relation.exp_rows.length == 0">
							<td></td>
							<td style="color: red;">无记录</td>
						</tr>
					</tbody>
				</table>
			</div>
		</vue-modal>
		<vue-modal :visible.sync="showModal2" title="详情" width="800px" height="60%">
			<div class="form-horizontal" style="width: 90%;padding-bottom: 10px;">
				<div class="form-group">
				    <label class="col-md-2 control-label">物流公司：</label>
				    <div class="col-md-4">
				    	<select class="form-control" v-model="express.name">
							<option value=""> - 选择 - </option>
							<option value="EMS"> EMS </option>
							<option value="顺丰"> 顺丰 </option>
							<option value="圆通"> 圆通 </option>
							<option value="中通"> 中通 </option>
							<option value="德邦"> 德邦 </option>
						</select>
				    </div>
				    <label class="col-md-2 control-label">物流公司：</label>
				    <div class="col-md-4">
				    	<input type="text" class="form-control" v-model="express.exp_no">
				    </div>
				</div>
			</div>
			<table class="table">
				<thead>
					<tr>
						<th>序号</th>
						<th>订单编号</th>
						<th>商品</th>
						<th>商品名称</th>
						<th>尺码 | 颜色</th>
						<th>拟定物流</th>
						<th>数量</th>
						<th>备注</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="row,i in ship_rows">
						<td>{{ i+1 }}</td>
						<td>{{ row.order_no }}</td>
						<td>
							<img :src="row.pic_tmb" style="height: 50px;">
						</td>
						<td>{{ row.goods_name }}</td>
						<td>{{ row.spec }} | {{ row.color }}</td>
						<td>{{ row.pre_express }}</td>
						<td style="width: 100px;">
							<input type="text" class="m-ipt" v-model="row.qty">
						</td>
						<td>
							<input type="text" class="m-ipt" v-model="row.remarks">
						</td>
					</tr>
				</tbody>
			</table>
			<div style="text-align: center;">
				<input type="button" class="btn btn-danger btn-sm" value="提交" @click="shipHandle()">
			</div>
		</vue-modal>
		<!-- 修改订单地址 -->
		<!-- 多选采购商弹框 -->
		<el-dialog
		title="修改信息"
		:visible.sync="addrDialog"
		width="30%">

			<div >
				<div  style="display:flex;flex-direction: column;">
					<div style="display: flex;align-items: center;">
						<span style="width: 60px;">地区:</span>
						<div class="col-sm-4">
							<select class="m-ipt" v-model="addrInfo.provinces" @change="getCities()">
								<option value="">- 省份 -</option>
								<option :value="province.id" v-for="province in provinces"> {{ province.name }} </option>
							</select>
						</div>
						<div class="col-sm-4">
							<select class="m-ipt" v-model="addrInfo.area" @change="getArea">
								<option value="">- 市/区 -</option>
								<option :value="city.id" v-for="city in cities"> {{ city.name }} </option>
							</select>
						</div>
					</div>
					
					<span style="margin: 10px 0;">详细地址：</span>
					<span>
						<el-input v-model="addrInfo.detail_addr" type="textarea" placeholder="请输入内容"></el-input>
					</span>
					<span style="margin: 10px 0;">电话号码：</span>
					<span>
						<el-input v-model="addrInfo.phone"  placeholder="请输入内容"></el-input>
					</span>
					<span style="margin: 10px 0;">客户姓名：</span>
					<span>
						<el-input v-model="addrInfo.cust"  placeholder="请输入内容"></el-input>
					</span>
				</div>
				<!-- <el-input v-model="name" placeholder="请输入内容">
				</el-input> -->
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button  @click="addrDialog=false" >取消</el-button>
				<el-button type="primary" @click="editAddrSubmit" >确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改报单信息 -->
		<el-dialog
		title="报单信息"
		:visible.sync="editBaodanDialog"
		width="30%">

			<div >
				<div  style="display:flex;flex-direction: column;">
					
					<span style="margin: 10px 0;">档口：</span>
					<span>
						<!-- <el-input v-model="addrInfo.detail_addr"  placeholder="请输入内容"></el-input> -->
						<el-select
							v-model="edit_info.stall_name"
							filterable
							remote
							reserve-keyword
							placeholder="请输入关键词"
							style="width:100%;"
							:remote-method="remoteMethod"
							:loading="loading">
							<el-option
							v-for="item in options"
							:key="item.id"
							:value="item.name"
							:label="item.pos + ' ' + item.name">
							</el-option>
						</el-select>
					</span>
					<span style="margin: 10px 0;">工厂价：</span>
					<span>
						<el-input v-model="edit_info.price"  placeholder="请输入内容"></el-input>
					</span>
					<span style="margin: 10px 0;">运费：</span>
					<span>
						<el-input v-model="edit_info.factory_price"  placeholder="请输入内容"></el-input>
					</span>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button  @click="editBaodanDialog=false" >取消</el-button>
				<el-button type="primary" @click="editBaodanSubmit" >确 定</el-button>
			</span>
		</el-dialog>
		<!-- END MAIN CONTENT -->
	</div>
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/vue.js"></script>
	<script src="__STATIC__/components/vue-page.js"></script>
	<script src="__STATIC__/components/vue-select.js"></script>
	<script src="__STATIC__/components/vue-modal.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
	<!-- 一键复制 -->
	<script src="__STATIC__/assets/scripts/clipboard.min.js"></script>
	<script src="__STATIC__/assets/vendor/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				allData:{
					all_price:0,
					all_qty:0
				},
				loading:false,
				options:[],
				editBaodanDialog:false,
				userInfo:{},
				addrDialog:false,
				addrInfo:{
					provinces:'',
					area:'',
					area_path:'',
					detail_addr:'',
					id:'',
					phone:'',
					cust:''
				},
				provinces:[],//省份
				cities:[],//城市
				search: {
					acct_name: '',
					cust: '',
					order_no: '',
					cate_name: '',
					brand_name: '',
					phone:'',
					progress: '',
					goods_categories_type:'',
				},
				rows: [],
				total_page: 0,
				cur_page: 1,
				showModal: false,
				showModal2: false,
				ship_rows: [],
				express: {
					name: '',
					exp_no: ''
				},
				progress_class: ['cancel','','','recv','delived','back','barter'],
				cur_item: {},
				cur_item_relation: {
					id: 0,
					pur_rows: [],
					exp_rows: []
				},
				pos: 1,
				pos2: 1,
				edit_status: 0,
				cancel_info: {
					id: 0,
					reason: ''
				},
				reject_info: {
					id: '',
					qty: '',
					reason: ''
				},
				exchange_info: {
					id: '',
					qty: '',
					reason: ''
				},
				base: {
					types: [
						{val: 1,name:'衣服'},
						{val: 2,name:'下装'},
						{val: 3,name:'鞋'},
						{val: 4,name:'箱包'},
						{val: 5,name:'饰品'},
						{val: 6,name:'化妆品'},

						{val: 7,name:'皮具'},
						{val: 8,name:'男装'},
						{val: 9,name:'女装'},
						{val: 10,name:'男鞋'},
						{val: 11,name:'女鞋'},
						{val: 12,name:'珠宝'},
						{val: 13,name:'百货'},
					],
					units: [
						{val: 1,name:'件'},
						{val: 2,name:'双'},
						{val: 3,name:'盒'},
						{val: 4,name:'个'},
						{val: 5,name:'套'}
					]
				},
				edit_info: {
					stall_name:'',
					factory_price:'',
					price:''
				},
			},
			components: {
				'vue-page': vuePage,
				'vue-select': vueSelect,
				'vue-modal': vueModal,
			},
			computed:{
				totalPrice(){
					return (items) => {
						let allPrice = 0;
						items.forEach((item,index)=>{
							allPrice = allPrice + (item.price*item.qty + Number(item.pack_price));
						})
						return allPrice;
					}
				},
			},
			created: function(){
				this.getList();
				this.getprovinces();
				this.getUserInfo();
			},
			methods:{
				remoteMethod(query) {
					let _this = this;
					if (query !== '') {
						this.loading = true;
						setTimeout(() => {
							let data = {
								name: query
							};
							this.loading = false;
							$.post("{%:url('Stall/getList')%}",data,function(rsp){
								_this.options = rsp.data.rows;
							},'json')
						}, 200);
					} else {
						this.options = [];
					}
				},
				
				openBaodanDialog(row){
					this.edit_info.id = row.id;
					this.edit_info.stall_name = row.stall_info.name;
					this.edit_info.price = row.price;
					this.edit_info.factory_price = row.factory_price;
					this.editBaodanDialog = true;
				},
				editBaodanSubmit(){
					var data = this.edit_info;
					var _this = this;

					$.post("{%:url('Purchase/editHandle')%}",data,function(rsp){
						// alert(rsp.msg);
						if (rsp.code) {
							_this.editBaodanDialog = false;
							_this.$message.success(rsp.msg);
							_this.cur_item_relation.id = '';
							_this.getReltList();
						}
					},'json')
					
				},
				// 获取个人信息
				getUserInfo: function(page=1){
					var _this = this;
					$.post("{%:url('Account/getUserInfo')%}",{},function(rsp){
						if(rsp.code == 1){
							_this.userInfo = rsp.data;
						}
						

					},'json')
				},
				// 复制文本
				copyFn(row) {
					let t = this;
					// 获取复制文本
					let cust ='姓名:'+row.cust+'\n';
					let phone = '手机号码:'+row.phone+'\n';
					let addr = `地址：${row.detail_addr}`;
					let res = cust+phone+addr;
					var clickBoard = new ClipboardJS(".clickboard", {
						text: () => {
							return res;
						}
					});
					console.log(clickBoard);
					//复制成功
					clickBoard.on("success", (e) => {

						t.$message.success('复制成功');
						// 清除对象
						clickBoard.destroy();
					});
					//复制失败
					clickBoard.on("error", (e) => {
						t.$message.error('复制失败');
					})
				},
				// 修改订单地址
				editAddr(row){
					// 给地区复制
					this.addrInfo.area_path = row.area_path;
					this.addrInfo.id = row.id;
					let [provinceName,areaName] = this.addrInfo.area_path.split(',');
					let provincesItem = this.provinces.filter(item=>item.name==provinceName);
					if(provincesItem){
						this.addrInfo.provinces = provincesItem[0].id;
						this.getCities(areaName);
						
					}
					
					this.addrInfo.detail_addr = row.detail_addr;
					this.addrInfo.phone = row.phone;
					this.addrInfo.cust = row.cust;
					this.addrDialog = true;
				},
				getList: function(page=1){
					var _this = this;
					var data = this.search;
					var date1 = $("input[name='date1']").val();
					var date2 = $("input[name='date2']").val();
					if (date1 && date2) {
						data['date1'] = date1;
						data['date2'] = date2;
					}
					$.post("{%:url('Orders/getList')%}?page=" + page,data,function(rsp){
						rsp.data.rows.forEach(function(row){
							row.show = true;
							row.checkedId = [];
						});
						_this.rows = rsp.data.rows;
						_this.allData = rsp.data.all_data;
						_this.total_page = rsp.data.total_page;
						_this.cur_page = Number(rsp.data.page);
					},'json')
				},
				getCities: function(areaName){
					var parent_id = this.addrInfo.provinces;
					var _this = this;
					$.post("{%:url('Area/getList')%}?page_size=50",{
						parent_id: parent_id,
					},function(rsp){
						_this.cities = rsp.data.rows;
						if(areaName){//弹框赋值
							let areaItem = _this.cities.filter(item=>item.name==areaName);
							_this.addrInfo.area = areaItem[0].id;
						}else{//选择省份
							_this.addrInfo.area = '';
						}
						

					},'json')
				},
				getprovinces: function(){
					var _this = this;
					$.post("{%:url('Area/provinces')%}",{
					},function(rsp){
						if(rsp.code == 1){
							_this.provinces = rsp.data;
						}

					},'json')
				},
				// 自动获取省份
				getArea:function(){
					let provinceId = this.addrInfo.provinces;
					let areaId = this.addrInfo.area;
					let provincesName = this.provinces.filter(item=>item.id==provinceId);
					let areaName = this.cities.filter(item=>item.id==areaId);
					this.addrInfo.area_path = provincesName[0]['name']+','+areaName[0]['name'];
					this.addrInfo.detail_addr = provincesName[0]['name']+areaName[0]['name']+this.addrInfo.detail_addr;
				},
				editAddrSubmit(){
					let t = this;
					let {area_path,detail_addr,id,phone,cust} = this.addrInfo;
					$.post("{%:url('orders/editAddr')%}",{area_path,detail_addr,id,phone,cust},function(rsp){
						if(rsp.code == 1){
							t.$message.success(rsp.msg);
							t.getList(t.cur_page);
							t.addrDialog = false;
						}else{
							t.$message.error(rsp.msg);
						}

					},'json')
				},
				resetForm: function(){
					for (var i in this.search){
						this.search[i] = '';
					}
				},
				ship: function(row){
					if (row.checkedId.length == 0){
						alert('请选择要发货的项');
						return;
					}

					this.showModal2 = true;
					this.ship_rows = [];

					var _this = this;
					row.items.forEach(function(item){
						if (row.checkedId.indexOf(item.id) > -1) {
							_this.ship_rows.push({
								order_no: row.order_no,
								order_item_id: item.id,
								goods_name: item.goods_name,
								spec: item.spec,
								color: item.color,
								pic_tmb: item.pic_tmb,
								pre_express: item.express,
								qty: '',
								remarks: ''
							});
						}
					})
				},
				shipHandle: function(){
					var _this = this;
					var info = this.express;
					info.items = this.ship_rows 
					$.post("{%:url('Express/handle2')%}",info, function(rsp){
						alert(rsp.msg);
						if (rsp.code){
							_this.showModal2 = false;
							_this.getList(_this.cur_page);
						}
					},'json')
				},
				detail: function(item){
					this.showModal = true;
					for(var i in item) {
						this.cur_item[i] = item[i];
					}
					this.cur_item_relation = {
						id: 0,
						pur_rows: [],
						exp_rows: []
					};
					this.pos = 1;
					this.pos2 = 1;
				},
				saveItem: function(){
					var _this = this;
					$.post("{%:url('Orders/saveItem')%}",this.cur_item, function(rsp){
						// alert(rsp.msg);
						if (rsp.code){
							_this.edit_status = 0;
							_this.getList(_this.cur_page);
						}
					},'json')
				},
				cancelItem: function(){
					var _this = this;

					$.post("{%:url('Orders/cancelItem')%}",this.cancel_info,function(rsp){
						alert(rsp.msg);
						if (rsp.code){
							_this.edit_status = 0;
							_this.cancel_info = {};
							_this.cur_item.progress = 0;
							_this.getList();
						}
					},'json')
				},
				rejectItem: function(){
					var _this = this;

					$.post("{%:url('Orders/handleReject')%}",this.reject_info,function(rsp){
						alert(rsp.msg)
						if (rsp.code){
							_this.edit_status = 0;
							_this.reject_info = {};
							_this.cur_item.progress = 5;
							_this.getList();
						}
					},'json')
				},
				exchangeItem: function(){
					var _this = this;

					$.post("{%:url('Orders/handleChange')%}",this.exchange_info,function(rsp){
						alert(rsp.msg)
						if (rsp.code){
							_this.edit_status = 0;
							_this.exchange_info = {};
							_this.cur_item.progress = 6;
							_this.getList();
						}
					},'json')
				},
				getReltList: function(){
					var _this = this;
					if (this.cur_item_relation.id){
						return;
					}
					$.post("{%:url('Orders/getRelationList')%}",{
						id: this.cur_item.id
					},function(rsp){
						_this.cur_item_relation = rsp.data;
						
					},'json')
				}
			}
		});
		
	</script>
</body>

</html>